<template>
	<view class="container">
		<view class="header">
			<image class="logo" src="/static/logo.png" mode="aspectFit"></image>
			<text class="title">XL-Tool 组件库</text>
			<text class="subtitle">高质量跨端组件解决方案</text>
		</view>

		<view class="content">
			<view v-for="(category, categoryIndex) in demoList" :key="categoryIndex" class="section">
				<view class="section-header">
					<text class="section-title">{{ category.category }}</text>
					<text class="section-desc">{{ category.items.length }}个组件</text>
				</view>

				<view class="demo-list">
					<app-link v-for="(item, index) in category.items" :key="index" :to="item.url" mode="navigate"
						class="demo-item">
						<view class="item-icon" :style="{ 'background': item.bgColor }">{{ item.icon }}</view>
						<view class="item-info">
							<text class="item-title">{{ item.title }}</text>
							<text class="item-desc">{{ item.desc }}</text>
						</view>
						<text class="item-arrow">→</text>
					</app-link>
				</view>
			</view>
		</view>

		<view class="footer">
			<text class="copyright">© {{ currentYear }} XL-Tool 免费开源，禁止商用倒转</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import AppLink from '@/components/app-link.vue';

// Demo列表数据
const demoList = ref([
	{
		category: '设备信息类',
		items: [
			{
				icon: '📱',
				title: '设备信息增强插件',
				desc: '获取详细设备参数、网络状态、传感器数据，支持模拟器检测',
				url: '/pages/demos/device-info-demo',
				bgColor: 'linear-gradient(45deg, #3B82F6 0%, #93C5FD 100%)'
			}
		]
	},
	{
		category: '文件处理类',
		items: [
			{
				icon: '📁',
				title: '文件处理工具箱',
				desc: '支持文件压缩、解压、格式转换等功能',
				url: '/pages/demos/file-tool-demo',
				bgColor: '#E3F2FD'
			},
			{
				icon: '💾',
				title: '高性能本地缓存引擎',
				desc: '支持SQLite和IndexedDB双引擎，自动加密，高性能缓存',
				url: '/pages/demos/cache-engine-demo',
				bgColor: '#E8F5E9'
			}


		]
	},
	{
		category: '蓝牙工具类',
		items: [
			{
				icon: '📱',
				title: '蓝牙连接工具',
				desc: '简化蓝牙设备连接流程，支持BLE和经典蓝牙（不支持H5）',
				url: '/pages/demos/bluetooth-demo',
				bgColor: 'linear-gradient(45deg, #0396FF 0%, #ABDCFF 100%)'
			},
			{
				icon: '🖨️',
				title: '打印机工具',
				desc: '支持多种打印机协议，可打印文本、图片和二维码',
				url: '/pages/demos/printer-demo',
				bgColor: 'linear-gradient(45deg, #60A5FA 0%, #BFDBFE 100%)'
			}
		]
	},
	{
		category: '视频支付类',
		items: [
			{
				icon: '💰',
				title: '多端支付聚合SDK',
				desc: '一次接入，全端支持，微信支付、支付宝等多种支付方式',
				url: '/pages/demos/payment-demo',
				bgColor: 'linear-gradient(45deg, #4facfe 0%, #00f2fe 100%)'
			},
			{
				icon: '📹',
				title: '实时音视频RTC',
				desc: '高质量音视频通话，一对一、多对多场景，适配多端',
				url: '/pages/demos/rtc-demo',
				bgColor: 'linear-gradient(45deg, #fa709a 0%, #fee140 100%)'
			}
		]
	},
	{
		category: 'UI组件类',
		items: [
			{
				icon: '🎯',
				title: '引导遮罩组件',
				desc: '多步骤引导遮罩，支持高亮元素和自定义提示',
				url: '/pages/demos/guideoverlay-demo',
				bgColor: 'linear-gradient(45deg, #F59E0B 0%, #FBBF24 100%)'
			},
			{
				icon: '📊',
				title: '拖拽排序列表',
				desc: '支持列表项拖拽排序，动画流畅，使用简单',
				url: '/pages/demos/drag-list-demo',
				bgColor: 'linear-gradient(45deg, #9333EA 0%, #C084FC 100%)'
			}
		]
	},
	{
		category: '网络工具类',
		items: [
			{
				icon: '🌐',
				title: '网络请求管理',
				desc: '统一的网络请求管理，支持拦截器和自定义适配器',
				url: '/pages/demos/request-demo',
				bgColor: 'linear-gradient(45deg, #26C6DA 0%, #80DEEA 100%)'
			},
			{
				icon: '📲',
				title: '二维码组件',
				desc: '生成和扫描二维码，支持自定义样式和Logo',
				url: '/pages/demos/qrcode-demo',
				bgColor: 'linear-gradient(45deg, #10B981 0%, #6EE7B7 100%)'
			}
		]
	}
]);

// 获取当前年份
const currentYear = computed(() => {
	return new Date().getFullYear();
});

// 导航方法
const navigateToDemo = (url) => {
	try {
		console.log('正在导航到页面:', url);

		// 如果是在H5环境中，强制使用 index.html
		if (typeof window !== 'undefined') {
			const baseUrl = window.location.origin + window.location.pathname.split('index.html')[0];
			window.location.href = baseUrl + 'index.html#' + url;
			return;
		}

		// 非H5环境使用uni API
		uni.navigateTo({
			url: '/' + url,
			fail: (err) => {
				console.error('导航失败:', err);
				// 如果navigateTo失败，尝试使用redirectTo
				uni.redirectTo({
					url: '/' + url,
					fail: (redirectErr) => {
						console.error('重定向失败:', redirectErr);
					}
				});
			}
		});
	} catch (e) {
		console.error('导航异常:', e);
	}
};
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
	background-color: #f7f7f7;
}

.header {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 30rpx 0 60rpx;

	.logo {
		width: 160rpx;
		height: 160rpx;
		margin-bottom: 20rpx;
	}

	.title {
		font-size: 44rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 12rpx;
	}

	.subtitle {
		font-size: 28rpx;
		color: #666;
	}
}

.content {
	flex: 1;
	width: 100%;

	.section {
		margin-bottom: 50rpx;
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);

		.section-header {
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.section-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				position: relative;
				padding-left: 24rpx;

				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 28rpx;
					background: #3B82F6;
					border-radius: 3rpx;
				}
			}

			.section-desc {
				font-size: 24rpx;
				color: #666;
				background: #f5f5f5;
				padding: 4rpx 16rpx;
				border-radius: 20rpx;
			}
		}
	}
}

.demo-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300rpx, 1fr));
	gap: 20rpx;

	.demo-item {
		background: #fff;
		border-radius: 16rpx;
		padding: 24rpx;
		transition: all 0.3s ease;
		border: 1px solid #f0f0f0;

		&:active {
			transform: translateY(2rpx);
			box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		}

		.item-icon {
			width: 80rpx;
			height: 80rpx;
			border-radius: 20rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			margin-right: 20rpx;
		}

		.item-info {
			flex: 1;

			.item-title {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 6rpx;
				display: block;
			}

			.item-desc {
				font-size: 26rpx;
				color: #666;
				display: block;
			}
		}

		.item-arrow {
			font-size: 34rpx;
			color: #999;
		}
	}
}

.footer {
	padding: 30rpx 0;
	text-align: center;

	.copyright {
		font-size: 24rpx;
		color: #999;
	}
}
</style>
